# Styling
> Supacharger uses Tailwind CSS as its styling foundation. The root layout imports one CSS entrypoint:
# Styling
Supacharger uses Tailwind CSS as its styling foundation. The root layout imports one CSS entrypoint:
```ts
import '@/supacharger/styles/globals.css';
```
That entrypoint loads Tailwind, the shared Supacharger styles, the developer-owned authentication presentation, and the application's general developer-owned stylesheet in that order. Do not import them again from the layout.
## Style ownership
| File | Owner | Purpose |
| --- | --- | --- |
| `src/supacharger/styles/globals.css` | Supacharger CLI | Tailwind entrypoint and import order only |
| `src/supacharger/styles/supacharger.css` | Supacharger CLI | Reusable Supacharger element and component rules |
| `src/supacharger/styles/project.example.css` | Supacharger CLI | Unimported reference for the developer stylesheet |
| `src/styles/supacharger-auth.css` | Application developer | Presentation for managed authentication `sc-auth-*` hooks |
| `src/styles/project.css` | Application developer | Project theme tokens, global defaults, overrides, and product-specific classes |
The CLI may replace files under `src/supacharger/styles/` during a core update. It installs `src/styles/supacharger-auth.css` when absent, then preserves it alongside `src/styles/project.css` and `src/supacharger.config.ts`.
Keep the `Project: ...` header in `project.css` updated with the application name. This makes the ownership of copied or compared styles explicit.
## Tailwind conventions
Use Tailwind utilities in markup for most styling. Add CSS only when a reusable semantic rule, an element default, a theme token, or a project-wide override is genuinely clearer than repeated utilities.
Place custom CSS in Tailwind's layers:
- `@layer base` for project theme variables and element defaults;
- `@layer components` for reusable semantic component classes; and
- `@layer utilities` for small, single-purpose project utilities.
Tailwind's Preflight already supplies the normal reset through `@import 'tailwindcss'`. Do not reproduce Preflight rules in project CSS, and do not add another Tailwind import to `project.css`.
The merge-managed `tailwind.config.ts` retains its TypeScript filename, application font choices, and current CommonJS export. The exact-managed `postcss.config.mjs` uses an explicit ESM export so Next.js and Turbopack can evaluate the Tailwind PostCSS plugin reliably. Keep the `@config` reference unchanged and do not add a package-wide `"type": "module"` solely for either file.
## Shared Supacharger rules
Rules that every Supacharger application should receive belong in the CLI-managed core stylesheet. Supacharger centrally gives enabled native and ARIA interactive controls a pointer cursor on hover:
```css title="src/supacharger/styles/supacharger.css"
@layer base {
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
:where(
a[href],
button:not(:disabled),
input[type='button']:not(:disabled),
input[type='submit']:not(:disabled),
input[type='reset']:not(:disabled),
input[type='checkbox']:not(:disabled),
input[type='radio']:not(:disabled),
label[for],
select:not(:disabled),
summary,
[role='button']:not([aria-disabled='true']),
[role='link']:not([aria-disabled='true']),
[role='menuitem']:not([aria-disabled='true']),
[role='menuitemcheckbox']:not([aria-disabled='true']),
[role='menuitemradio']:not([aria-disabled='true']),
[role='option']:not([aria-disabled='true']),
[role='tab']:not([aria-disabled='true'])
) {
cursor: pointer !important;
}
}
```
The root rule is the native fallback for same-page fragment links. The installed root layout also mounts `SmoothAnchorNavigation` from `src/supacharger/components/layout/smooth-anchor-navigation.tsx`, because Next.js `` can otherwise perform an immediate fragment jump before CSS animates it. Together they make `` and `` work automatically. Modified clicks, downloads, non-self targets, and missing fragments retain normal browser behaviour; add `data-smooth-scroll="false"` to opt out for one link. Visitors who request reduced motion receive immediate navigation. The `!important` cursor declaration intentionally keeps that interaction affordance authoritative when a component library supplies `cursor-default`. Disabled controls are excluded so they do not misleadingly advertise an available action. Ordinary components therefore should not repeat `cursor-pointer` or page-level smooth-scroll utilities.
Change this file in the canonical Supacharger core first, then distribute the same file through the CLI. Do not add product branding or application-specific selectors to it.
## Project styles
Put the application's colors, typography defaults, visual effects, and overrides in `src/styles/project.css`:
```css title="src/styles/project.css"
/**
* Project: Example Application
*
* Developer-owned. The Supacharger CLI must preserve this file.
*/
@layer base {
:root {
--primary: 174 49% 50%;
--primary-foreground: 222 47% 11%;
}
}
```
Tailwind color mappings in `tailwind.config.ts` consume these space-separated HSL channels. For example, `#42bfb1` becomes `174 49% 50%`.
`--primary` is the application's main brand action colour and `--primary-foreground` is the content colour placed on top of it. Prefer semantic utilities such as `bg-primary`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-accent`, and `ring-ring`. They automatically follow the named project's light and dark token values; a shared component should not copy a product hex value.
Application-specific classes may override a shared Supacharger class because `project.css` is imported after `supacharger.css`. Keep overrides intentional and document why the consumer differs from the core.
## Theme selector
The shared `ModeToggle` opens a three-position selector ordered System, Light, and Dark. Use `appearance='marketing'` beside the application-owned locale switcher when both controls appear in marketing navigation or a footer. The marketing appearance gives both triggers the same control height, padding, text size, and small radius. The application-owned root layout must mount a compatible theme provider with system mode enabled so every choice can resolve correctly.
## Responsive SVG components
Keep UI SVGs under the developer-owned `src/` path belonging to their feature or surface, with demo-only artwork under `src/components/sc_demo/`. Import them as React components through SVGR and use `public/` only when an asset genuinely needs a URL.
Every responsive SVG must have a valid `viewBox` so it preserves its aspect ratio. When CSS or Tailwind controls the rendered size, remove `width` and `height` from the root `